<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        宝贝进出记录
      </p>
      <Row type="flex" justify="space-between">
        <div>
          宝贝名称：
          <Input v-model="searchparam.studentName" placeholder="幼儿姓名关键字" @on-change="queryFn"
                 style="width: 100px;margin-right: 4px;"/> 班级：

          <Select v-model="searchparam.clazzId" @on-change="queryFn" style="width:150px">
            <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{item.gradeName}}-{{ item.name }}
            </Option>
          </Select>
          <div class="db_inline">
            出入状态：
            <Select v-model="searchparam.direction" @on-change="queryFn" style="width:120px">
              <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}
              </Option>
            </Select>
            日期：
            <DatePicker type="date" v-model="searchparam.day" placeholder="时间" @on-change="searchparam.day=$event"
                        style="width: 130px"></DatePicker>
          </div>
          <span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
          <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
          <div class="control">
            <Button @click="exportFn" type="info">
              <Icon type="navicon" size="20"></Icon>
              <span>全部导出</span>
            </Button>
          </div>
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table :height='tableHeight' ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" show-total :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>

    <Modal v-model="details.visible" title="抓拍照片" width="450">
      <div style="line-height: 30px;font-size: 16px">
        <div>
         <img :src="details.url" style="height: 250px;width: 400px">
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import vueUpload from "@/components/views/upload/Upload";


  export default {
    name: "Background",
    components: {
      VmBtable,
      vueUpload,
    },
    data() {
      return {
        cutHeight: 280,
        tableHeight: 640,
        type: 0,
        details: {
          url: '',
          visible: false,
        },
        searchTitle: '',
        clazzList: [],
        statusList: [
          {id: '', name: '全部'},
          {id: 0, name: '入园'},
          {id: 1, name: '离园'},
        ],
        searchparam: {
          current: 1,
          size: 20,
          total:0,
          studentName: '',
          clazzId: '',
          direction:'',
          day: '',
        },
        dataColumns: [{
          type: 'index',
          title: '序号',
          align: 'center',
          minWidth: 60
        },
          {
            title: '宝贝名',
            key: 'studentName',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '班级名称',
            key: 'clazzName',
            minWidth: 150,
            align: 'center',
          },

          {
            title: '记录时间',
            key: 'signTime',
            minWidth: 150,
            align: 'center',
            sortable: true,
            sortType: 'desc',
          },
          {
            title: '记录类型',
            key: 'signType',
            minWidth: 150,
            align: 'center',
            sortable: true,
            sortType: 'asc',
          }, {
            title: '进出方向',
            key: 'direction',
            align: 'center',
            sortable: true,
            sortType: 'asc',
            render: (h, param) => {
              let direction = param.row.direction;
              if (direction) {
                return h('div',{},'出园')
              }
              return h('div',{},'入园')
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailFn(params.row)
                  }
                }
              }, '抓拍记录');
              btn.push(detailBtn);
              return h('div', btn);
            }
          }
        ],
        dataTable: [],
      }
    },
    methods: {
      dayChange(day) {
        this.searchparam.day = day;
        this.queryFn();
      },
      exportFn() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否导出全部进出记录？',
          onOk: () => {
            API.fetchStudentRecordexport(this.searchparam);
          },
          onCancel: () => {

          }
        })
      },
      queryFn() {
        API.fetchStudentRecord(this.searchparam).then(resp => {
          this.dataTable = resp.data.records;
          this.searchparam.total = resp.data.total;
          this.searchparam.current = resp.data.current;
        })
      },
      pageChange(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
      restFn() {
        this.searchparam.current = 1;
        this.searchparam.studentName = '';
        this.searchparam.direction = '';
        this.searchparam.clazzId = '';
        this.searchparam.day = '';
        this.queryFn();
      },
      fetchKindergartenType() {
        API.fetchKindergartenType().then(resp => {
          this.type = resp.data;
        })
      },
      detailFn(data) {
        let url=data.studentAvatar;
        if (!url) {
          this.$Notice.warning('找不到抓拍记录');
          return;
        }
        Object.assign(this.details, {
          visible: true,
          title: '接送情况',
          url: url
        })
      },
      cancelFn() {
      },
      complete() {
      },
      submitFn() {
      },
      fetchKindergartenClazz() {
        API.fetchKindergartenClazz().then(resp => {
          this.clazzList = resp.data;
        })
      },
      setHeight() {
        this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
      }
    },
    mounted() {
      this.queryFn();
      this.setHeight();
      this.fetchKindergartenClazz();
    }
  }
</script>

<style scoped>

</style>
